<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>广告管理</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>


    <!--引入bootrtrap文件使用文件上传   注意：css文件一定要在上面-->
    <link rel="stylesheet" href="../js/bootstrap-fileinput/css/fileinput.css">
    <!--引入bootrtrap文件使用文件上传   注意：css文件一定要在上面-->
    <script charset="utf-8" src="../js/bootstrap-fileinput/js/fileinput.js"></script>


    <!--引入自定义文件-->
    <script src="../js/pages/public.js"></script>
</head>

<body class="hold-transition skin-red sidebar-mini">
<!-- .box-body -->

<div class="box-header with-border">
    <h3 class="box-title">广告管理</h3>
</div>

<div class="box-body">

    <!-- 数据表格 -->
    <div class="table-box">

        <!--工具栏-->
        <div class="pull-left">
            <div class="form-group form-inline">
                <div class="btn-group">
                    <button type="button" class="btn btn-default" title="新建" data-toggle="modal"
                            data-target="#editModal"><i class="fa fa-file-o"></i> 新建
                    </button>
                    <button type="button" class="btn btn-default" onclick="deleteContent()" title="删除"><i
                            class="fa fa-trash-o"></i> 删除
                    </button>
                    <button type="button" class="btn btn-default" title="开启" onclick='confirm("你确认要开启吗？")'><i
                            class="fa fa-check"></i> 开启
                    </button>
                    <button type="button" class="btn btn-default" title="屏蔽" onclick='confirm("你确认要屏蔽吗？")'><i
                            class="fa fa-ban"></i> 屏蔽
                    </button>
                    <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i
                            class="fa fa-refresh"></i> 刷新
                    </button>
                </div>
            </div>
        </div>
        <div class="box-tools pull-right">
            <div class="has-feedback">

            </div>
        </div>
        <!--工具栏/-->

        <!--数据列表-->
        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
            <thead>
            <tr>
                <th class="" style="padding-right:0px">
                    <input id="selall" type="checkbox" class="icheckbox_square-blue">
                </th>
                <th class="sorting_asc">广告ID</th>
                <th class="sorting">分类ID</th>
                <th class="sorting">标题</th>
                <th class="sorting">URL</th>
                <th class="sorting">图片</th>
                <th class="sorting">排序</th>
                <th class="sorting">是否有效</th>
                <th class="text-center">操作</th>
            </tr>
            </thead>
            <tbody id="TRbody">

            </tbody>
        </table>
        <!--数据列表/-->
    </div>
    <!-- 数据表格 /-->
</div>
<!-- /.box-body -->


<!-- 编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">广告编辑</h3>
            </div>
            <div class="modal-body">

                <!--                <form id="InForm">-->
                <table class="table table-bordered table-striped" width="800px">
                    <tr>
                        <td>广告分类</td>
                        <td>
                            <select id="CateId" name="categoryId" class="form-control">
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>标题</td>
                        <td><input name="title" class="form-control" placeholder="标题"></td>
                    </tr>
                    <tr>
                        <td>URL</td>
                        <td><input name="url" class="form-control" placeholder="URL"></td>
                    </tr>
                    <tr>
                        <td>排序</td>
                        <td><input name="sortOrder" class="form-control" placeholder="排序"></td>
                    </tr>
                    <tr>
                        <td>广告图片</td>
                        <td>
                            <input name="pic" type="text" class="form-control" id="Inpic" disabled="disabled">
                            <input type="file" id="multipartFile" name="multipartFile"/>
                        </td>
                    </tr>
                    <tr>
                        <td>是否有效</td>
                        <td>
                            <input name="status" type="checkbox" class="icheckbox_square-blue">
                        </td>
                    </tr>
                </table>
                <!--                </form>-->

            </div>
            <div class="modal-footer">
                <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="InsertContent()">保存
                </button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>

<!--修改窗口-->
<div class="modal fade" id="updateeditModal" tabindex="-1" role="dialog" aria-labelledby="updatemyModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="updatemyModalLabel">广告编辑</h3>
            </div>
            <div class="modal-body">

                <form id="UpForm">
                    <input type="hidden" id="id">
                    <table class="table table-bordered table-striped" width="800px">
                        <tr>
                            <td>广告分类</td>
                            <td>
                                <select id="UpCateId" name="categoryId" class="form-control">
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>标题</td>
                            <td><input name="title" id="title" class="form-control" placeholder="标题"></td>
                        </tr>
                        <tr>
                            <td>URL</td>
                            <td><input name="url" id="url" class="form-control" placeholder="URL"></td>
                        </tr>
                        <tr>
                            <td>排序</td>
                            <td><input name="sortOrder" id="sortOrder" class="form-control" placeholder="排序"></td>
                        </tr>
                        <tr>
                            <td>广告图片</td>
                            <td>
                                <input type="text" disabled="disabled" class="form-control" id="catefiles" name="catefiles">
                                <input type="file" id="myfiles" name="filename" multiple />
                            </td>
                        </tr>
                        <tr>
                            <td>是否有效</td>
                            <td>
                                <input name="status" id="status" type="checkbox" class="icheckbox_square-blue" >
                            </td>
                        </tr>
                    </table>
                </form>

            </div>
            <div class="modal-footer">
                <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="UpdateContent()">保存
                </button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>

</body>
<script th:inline="javascript">
    $(function () {
        getContentList();
        getCateGory();
    })

    function getContentList() {
        $.ajax({
            url: domain + "/content/getContentList",
            headers: {"Autherizetion": window.localStorage.getItem("token")},
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            type: "post",
            data: JSON.stringify({}),
            success: function (result) {
                if (result.code == 11) {
                    console.log(result)
                    var data = result.data;
                    var html = '';
                    $(data).each(function (i, e) {
                        html += '<tr>\n' +
                            '\t\t\t                              <td><input name="check" value="' + e.id + '" type="checkbox"></td>\t\t\t                              \n' +
                            '\t\t\t\t                          <td>' + e.id + '</td>\n' +
                            '\t\t\t\t\t\t\t\t\t      <td>' + e.categoryId + '</td>\n' +
                            '\t\t\t\t\t\t\t\t\t      <td>' + e.title + '</td>\n' +
                            '\t\t\t\t\t\t\t\t\t      <td>' + e.url + '</td>\n' +
                            '\t\t\t\t\t\t\t\t\t      <td>\n' +
                            '\t\t\t\t\t\t\t\t\t      \t<img alt="" src="' + e.pic + '" width="100px" height="50px">\n' +
                            '\t\t\t\t\t\t\t\t\t      </td>\n' +
                            '\t\t\t\t\t\t\t\t\t      <td>' + e.sortOrder + '</td>\n';
                        if (e.status == 1) {
                            html += '<td>有效</td>';
                        } else if (e.status == 0) {
                            html += '<td>无效</td>';
                        }
                        html += '\t\t                                  <td class="text-center">                                           \n' +
                            '\t\t                                 \t  <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" onclick="toUpdates(' + e.id + ')" data-target="#updateeditModal">修改</button>                                           \n' +
                            '\t\t                                  </td>\n' +
                            '\t\t\t                          </tr>'
                    })
                    $("#TRbody").html(html)
                } else if (result.code == 12) {
                    top.window.location.href = "../login.html";
                }
            }
        })
    }

    //查询广告分类
    function getCateGory() {
        $.ajax({
            url: domain + "/contentCategory/getCategoryList",
            headers: {"Autherizetion": window.localStorage.getItem("token")},
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            type: "post",
            // data: JSON.stringify({}),
            success: function (result) {
                if (result.code == 11) {
                    // console.log(result)
                    var data = result.data;
                    var html1 = ''
                    $(data).each(function (i, e) {
                        html1 += '<option value="' + e.id + '">' + e.name + '</option>'
                    })
                    $("#CateId").html(html1)//增加窗口
                    $("#UpCateId").html(html1)//修改窗口
                } else if (result.code == 12) {
                    top.window.location.href = "../login.html";
                }
            }
        })
    }

    //增加
    function InsertContent() {
        var status = $("[name=status]").prop("checked")//判断复选框是否选中
        if (status == true) {
            $("[name=status]").val(1)
        } else {
            $("[name=status]").val(0)
        }
        console.log(status)

        var list = {
            "categoryId": $("#CateId").val(),
            "title": $('input[name=title]').val(),
            "url": $('input[name=url]').val(),
            "sortOrder": $('input[name=sortOrder]').val(),
            "pic": $('input[name=pic]').val(),
            "status": $("[name=status]").val(),
        };
        console.log(list)
        $.ajax({
            url: domain + "/content/InsertContent",
            headers: {"Autherizetion": window.localStorage.getItem("token")},
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            type: "post",
            data: JSON.stringify(list),
            success: function (result) {
                if (result.code == 11) {
                    alert("增加成功")
                    window.location.reload()
                } else if (result.code == 12) {
                    top.window.location.href = "../login.html";
                }
            }
        })
    }


    //删除
    function deleteContent() {
        var arr = [];
        var check = document.getElementsByName("check");
        for (let i = 0; i < check.length; i++) {
            if (check[i].checked) {
                arr.push(check[i].value)
            }
        }
        if (arr <= 0) {
            alert("请选择要删除的数据")
            return;
        }
        console.log(arr)
        if (confirm("确定要删除吗？")) {
            $.ajax({
                url: domain + "/content/deleteContent/" + arr,
                headers: {'Autherizetion': window.localStorage.getItem("token")},//获取浏览器缓存中的token进行过滤器放过
                contentType: "application/json;charset=utf-8",//我将来要往前台发送数据的时候是以json的格式发送的
                dataType: "json",
                type: "delete",//必须指定请求类型
                // data:{arr:arr},//往后台发送的确确实实是一个json数据
                success: function (result) {
                    if (result.code == 11) {
                        alert("删除成功")
                        location.reload();//刷新
                    } else if (result.code == 12) {
                        top.window.location.href = "../login.html";//token失效 跳转回登录界面  重新登录生成token  放进缓存  重新获取
                    }
                }
            })
        }
    }

    //注意:使用的时候由于无法携带token的原因，所以直接在网关中放过
    $('#multipartFile').fileinput({
        language: 'zh',
        uploadUrl: domain + '/file/MyFile',
        browseClass: 'btn btn-primary',
        allowedFileExtensions: ["png", "jpg", "gif"],
        enctype: "multipart/form-data",
    });

    var a;
    $('#multipartFile').on('fileuploaded', function (event, data, previewId, index) {
        if (data.response.code == 11) {
            a = data.response.data
            console.log(a)
            $("#Inpic").val(a)//把图片路径赋值给表单中的一个input  表单然后通过name属性直接增加
        }
    });


    //回显
    function toUpdates(id) {
        $.ajax({
            url: domain + "/content/toUpdategetById",
            headers: {"Autherizetion": window.localStorage.getItem("token")},
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            type: "get",
            data: {id: id},//JSON.stringify({})
            success: function (result) {
                if (result.code == 11) {
                    console.log(result)
                    var data = result.data;

                    //给回显的表单赋值
                    $("#id").val(data.id)
                    $("#UpCateId").val(data.categoryId)
                    $("#title").val(data.title)
                    $("#url").val(data.url)
                    $("#sortOrder").val(data.sortOrder)
                    $("#catefiles").val(data.pic)
                    $("#status").val(data.status)
                    //复选框
                    if(data.status == "1"){
                        $("#status").prop("checked",true);
                    }else if (data.status == "0"){
                        $("#status").prop("checked",false);
                    }

                    fileimg(data.pic)
                } else if (result.code == 12) {
                    top.window.location.href = "../login.html";
                }
            }
        })
    }


    function fileimg(img){
        $('#myfiles').fileinput({
            language: 'zh',//汉化
            uploadUrl: '/file/upLoadFile',
            maxFileCount : 3,//最大上传数量
            allowedFileExtensions : ['jpg', 'gif', 'png'],//限制文件上传类型
            maxFileSize : 1024000,//文件上传大小单位kb
            enctype : 'multipart/form-data',
            initialPreviewAsData: true,//是否初始化预览图片
            initialPreviewFileType: 'image',//回显文件类型(初始预览文件类型)
            initialPreview : img,//图片回显(初始预览图片地址 )
        });
        //上传成功回调
        $("#myfiles").on("fileuploaded", function(event, result, previewid, index){
            if(result.response.code = 11){
                $("#catefiles").val(result.response.data);
            }
        })
    }
</script>
</html>